<template>
  <div class="login">
    <div class="pos-div">
      <header><span>管理系统</span></header>
      <el-form
        ref="form"
        :model="ruleForm"
        label-width="80px"
        label-position="top"
        class="form-cls"
        :rules="rules"
      >
        <h3>登陆</h3>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            maxlength="11"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="el-form-btn"
            type="primary"
            @click="onSubmit"
            :loading="isLoading"
          >登陆</el-button>
        </el-form-item>
      </el-form>
      <footer>
        <el-button plain class="el-back-btn">⬅回到 用户端</el-button>
      </footer>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { userLogin } from '@/services/user'
import { Form } from 'element-ui'
export default Vue.extend({
  name: 'LoginIndex',
  data () {
    const validatorPhone = (rule:RegExp, value:string, callback:any) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    const validatorPassword = (rule:RegExp, value:string, callback:any) => {
      if ((this as Vue).$data.ruleForm.phone === value) {
        callback(new Error('密码与手机号一致，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        phone: '18201288771',
        password: '111111'
      },
      isLoading: false,
      rules: {
        phone: [
          // { required: true, message: '请输入手机号', trigger: 'blur' },
          { required: true, validator: validatorPhone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '输入密码长度至少6位' },
          { validator: validatorPassword }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      try {
        console.log('我要打印', this.$refs.form)
        await (this.$refs.form as Form).validate()
        this.isLoading = true
        const { data } = await userLogin(this.ruleForm)
        if (data.state !== 1) {
          this.isLoading = false
          return this.$message.error(data.message)
        }
        // 记录登录状态,全局访问(Vuex),并让数据持久化
        this.$store.commit('setUser', data.content)

        // this.$router.push({
        //   name: 'home'
        // })
        // 如果已经选好了页面了，token失效，再登陆时会跳转回当前页面
        this.$router.push(this.$route.query.redirect as string || '/')

        this.$message.success('登录成功')
        // console.log('setUser..', data)
      } catch (err) {
        this.$message.error(`登陆失败 ${err}`)
      }
      this.isLoading = false
    }
  }
})
</script>

<style lang="scss" scoped>
.login{
  background: $login-bg;
  min-height: 100vh;
  overflow: hidden;

  .pos-div{
    width: 26rem;
    height: 34rem;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  header {
    color: $info-color;
    font-size: 3rem;
    font-weight: 100;
  }
  .form-cls {
    width: 20rem;
    background: $white-color;
    padding: 1.2rem;
    border-radius: 0.3rem;
    h3{
      margin-top: 0px;
    }
    .el-form-btn{
      width: 100%;
    }
  }
  .el-back-btn{
    width: 23rem;
  }
}
</style>
